import React, { PureComponent } from 'react';
import styled, { ThemeProvider } from 'styled-components';

import Home from '../home'
import Profile from '../profile'


const HYButton = styled.button`
  padding: 10px 20px;
  border-color: red;
  color: red;
`

// const HYPrimaryButton = styled.button`
//   padding: 10px 20px;
//   border-color: red;
//   color: #fff;
//   background-color:green;
// `

// 继承
const HYPrimaryButton = styled(HYButton)` 
  /* CSS样式 */
  color: #fff;
  background-color:green;
`

class App extends PureComponent {
  render() {
    return (
      <ThemeProvider theme={{ themeColor: "yellow", fontSize: "30px" }}>
        App
        <h2 className="title">我是App的title</h2>
        <hr />
        <Home></Home>
        <hr />
        <Profile></Profile>
        <HYButton>我是普通的按钮</HYButton>
        <HYPrimaryButton>我是主要的按钮</HYPrimaryButton>
      </ThemeProvider >
    );
  }
}


export default App;